<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
      }
    </style>
    <title>简易行政区图 - 省份&层级</title>
  </head>
  <body>
    <div id="container"></div>

    <script src="https://webapi.amap.com/maps?v=1.4.15&key=973c31822203d5d7e813bb2903afd5fe&plugin=Map3D,AMap.DistrictLayer,AMap.Scale,AMap.ToolBar"></script>
    <script src="https://a.amap.com/Loca/static/mock/adcodes.js"></script>
    <script>
      var adCode = 310000;
      var depth = 2;
      var map = new AMap.Map("container", {
        zoom: 4.5,
        center: [116.412427, 39.303573],
        pitch: 0,
        viewMode: "3D",
        mapStyle: "amap://styles/3a36e8078dca95476cd9363fb3a960df",
      });

      // 创建省份图层
      var disProvince;
      function initPro(code, dep) {
        dep = typeof dep == "undefined" ? 2 : dep;
        adCode = code;
        depth = dep;

        disProvince && disProvince.setMap(null);

        disProvince = new AMap.DistrictLayer.Province({
          zIndex: 12,
          adcode: [code],
          depth: 1,
          styles: {
            fill: "rgba(153,204,204,.5)",
            "city-stroke": "cornflowerblue",
          },
        });

        disProvince.setMap(map);
      }

      // 颜色辅助方法
      var colors = {};
      var getColorByAdcode = function (adcode) {
        if (!colors[adcode]) {
          var gb = Math.random() * 155 + 50;
          colors[adcode] = "rgb(" + gb + "," + gb + ",255)";
        }

        return colors[adcode];
      };

      initPro(adCode, depth);
    </script>
  </body>
</html>
